import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Studemo1 from '../views/study1/StuDemo1.vue'
import Studemo2 from '../views/study1/StuDemo2.vue'
import Studemo3 from '../views/study1/StuDemo3.vue'
import Studemo4 from '../views/study1/StuDemo4'
import Studemo5 from '../views/study1/StuDemo5.vue'
import Studemo6 from '../views/study1/StuDemo6.vue'

import Studemo21 from '../views/study2/StuDemo1.vue'
import Studemo22 from '../views/study2/StuDemo2.vue'
import Studemo23 from '../views/study2/StuDemo3.vue'
import Studemo24 from '../views/study2/StuDemo4.vue'

import Studemo31 from '../views/study3/StuDemo1.vue'
import Studemo32 from '../views/study3/StuDemo2.vue'
import Studemo33 from '../views/study3/StuDemo3.vue'
import Studemo34 from '../views/study3/StuDemo4.vue'
import Studemo35 from '../views/study3/StuDemo5.vue'
import Studemo36 from '../views/study3/StuDemo6.vue'

import Studemo41 from '../views/study4/StuDemo1.vue'
import Studemo42 from '../views/study4/StuDemo2.vue'
import Studemo43 from '../views/study4/StuDemo3.vue'
import Studemo44 from '../views/study4/StuDemo4.vue'
import Studemo45 from '../views/study4/StuDemo5.vue'
import Studemo46 from '../views/study4/StuDemo6.vue'
import Studemo47 from '../views/study4/StuDemo7.vue'
import Studemo48 from '../views/study4/StuDemo8.vue'

import Studemo51 from '../views/study5/StuDemo1.vue'
import Studemo52 from '../views/study5/StuDemo2.vue'
import Studemo53 from '../views/study5/StuDemo3.vue'
import Studemo54 from '../views/study5/StuDemo4.vue'
import Studemo55 from '../views/study5/StuDemo5.vue'

import Studemo61 from '../views/study6/StuDemo1.vue'
import Studemo62 from '../views/study6/StuDemo2.vue'
import Studemo63 from '../views/study6/StuDemo3.vue'
import Studemo64 from '../views/study6/StuDemo4.vue'

import Studemo71 from '../views/study7/StuDemo1.vue'
import Studemo72 from '../views/study7/StuDemo2.vue'
import Studemo73 from '../views/study7/StuDemo3.vue'

import Studemo81 from '../views/study8/StuDemo1.vue'

import Studemo91 from '../views/study9/StuDemo1.vue'
import Studemo92 from '../views/study9/StuDemo2.vue'
import Studemo93 from '../views/study9/StuDemo3.vue'
import Studemo94 from '../views/study9/StuDemo4.vue'

import TestOne from '../views/test/test-one.vue'
import TestTwo from '../views/test/test-two.vue'


import Example1 from '../views/Examples/example1.vue'

import Studdemo1 from '../views/studydemo/demo1.vue'
import Studdemo2 from '../views/studydemo/demo2.vue'
import Studdemo3 from '../views/studydemo/demo3.vue'
import Studdemo4 from '../views/studydemo/demo4.vue'

import demoUI1 from '../views/studyDemoUI/demoUI1.vue'
import userManage from '../views/studyDemoUI/components/userManage.vue'
import roleManage from '../views/studyDemoUI/components/roleManage.vue'

import StudyRouterDemo1 from '../views/studyRouter/demo1.vue'
import ErrorPage from '../views/studyRouter/ErrorPage.vue'
import UserHome from '../views/studyRouter/UserHome.vue'

import srDetail1 from '../views/studyRouter/studySonRouter/sonDemo1.vue'
import srDetail2 from '../views/studyRouter/studySonRouter/sonDemo2.vue'

import Test from '../views/mytest/test.vue'
import Test1 from '../views/mytest/test1.vue'
import Test2 from '../views/mytest/test2.vue'

// study1
const study1Routers = [
  {
    path: '/studemo1',
    name: 'studemo1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo1,
    title: '选项式API'
  },
  {
    path: '/studemo2',
    name: 'studemo2',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo2,
    title: '组合式API'
  },
  {
    path: '/studemo3',
    name: 'studemo3',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo3,
    title: '组合式API-自定义渲染-返回函数(h)' 
  },
  {
    path: '/studemo4',
    name: 'studemo4',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo4,
    title: '组合式API-自定义渲染-JSX（推荐）'
  },
  {
    path: '/studemo5',
    name: 'studemo5',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo5,
    title: '组合式API-setup语法糖'
  },
  {
    path: '/studemo6',
    name: 'studemo6',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo6,
    title: '组合式API-setup语法糖(ts)'
  }
]

// study2
const study2Routers = [
  {
    path: '/studemo21',
    name: 'studemo21',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo21,
    title: '模板语法一'
  },
  {
    path: '/studemo22',
    name: 'studemo22',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo22,
    title: '模板语法二'
  },
  {
    path: '/studemo23',
    name: 'studemo23',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo23,
    title: '模板语法三'
  },
  {
    path: '/studemo24',
    name: 'studemo24',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo24,
    title: '模板语法总结'
  }
]

// study3
const study3Routers = [
  {
    path: '/studemo31',
    name: 'studemo31',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo31,
    title: '类与样式绑定'
  },
  {
    path: '/studemo32',
    name: 'studemo32',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo32,
    title: '响应式基础'
  },
  {
    path: '/studemo33',
    name: 'studemo33',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo33,
    title: '计算属性'
  },
  {
    path: '/studemo34',
    name: 'studemo34',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo34,
    title: '条件渲染'
  },
  {
    path: '/studemo35',
    name: 'studemo35',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo35,
    title: '列表渲染'
  },
  {
    path: '/studemo36',
    name: 'studemo36',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo36,
    title: '事件处理'
  }
]

// study4
const study4Routers = [
  {
    path: '/studemo41',
    name: 'studemo41',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo41,
    title: '响应式工具'
  },
  {
    path: '/studemo42',
    name: 'studemo42',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo42,
    title: 'Reactive Proxy vs. Original'
  },
  {
    path: '/studemo43',
    name: 'studemo43',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo43,
    title: 'reactive() 的局限性'
  },
  {
    path: '/studemo44',
    name: 'studemo44',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo44,
    title: '额外的 ref 解包细节'
  },
  {
    path: '/studemo45',
    name: 'studemo45',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo45,
    title: '响应式 API:工具函数'
  },
  {
    path: '/studemo46',
    name: 'studemo46',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo46,
    title: 'Multiple Timers1'
  },
  {
    path: '/studemo47',
    name: 'studemo47',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo47,
    title: 'Multiple Timers2'
  },
  {
    path: '/studemo48',
    name: 'studemo48',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo48,
    title: 'Multiple Timers3'
  }
]

// study5
const study5Routers = [
  {
    path: '/studemo51',
    name: 'studemo51',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo51,
    title: '计算属性'
  },{
    path: '/studemo52',
    name: 'studemo52',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo52,
    title: '侦听数据源类型'
  },{
    path: '/studemo53',
    name: 'studemo53',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo53,
    title: '侦听器'
  },{
    path: '/studemo54',
    name: 'studemo54',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo54,
    title: 'watchEffect'
  },{
    path: '/studemo55',
    name: 'studemo55',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo55,
    title: '侦听器-副作用清理'
  }
]

// study6
const study6Routers = [
  {
    path: '/studemo61',
    name: 'studemo61',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo61,
    title: '组件注册'
  },{
    path: '/studemo62',
    name: 'studemo62',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo62,
    title: '组件传值:props'
  },{
    path: '/studemo63',
    name: 'studemo63',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo63,
    title: '组件事件:emit'
  },{
    path: '/studemo64',
    name: 'studemo64',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo64,
    title: '插槽 Slots'
  }
]

// study7
const study7Routers = [
  {
    path: '/studemo71',
    name: 'studemo71',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo71,
    title: '生命周期函数-onMounted'
  },{
    path: '/studemo72',
    name: 'studemo72',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo72,
    title: '生命周期函数-onUnmounted'
  },{
    path: '/studemo73',
    name: 'studemo73',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo73,
    title: '生命周期函数-onUpdated'
  }
]

// study8
const study8Routers = [
  {
    path: '/studemo81',
    name: 'studemo81',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo81,
    title: '组件v-model'
  }
]

// study9
const study9Routers = [
  {
    path: '/studemo91',
    name: 'studemo91',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo91,
    title: 'HTTP-API请求'
  },{
    path: '/studemo92',
    name: 'studemo92',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo92,
    title: 'HTTP-axios请求'
  },{
    path: '/studemo93',
    name: 'studemo93',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo93,
    title: 'HTTP-axios请求示例'
  },{
    path: '/studemo94',
    name: 'studemo94',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studemo94,
    title: '组件Element'
  }
]

// test
const testRouters = [
  {
    path: '/testOne',
    name: 'testOne',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: TestOne,
    title: 'testOne'
  },{
    path: '/testTwo',
    name: 'testTwo',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: TestTwo,
    title: 'testTwo'
  }
]

// Examples
const ExamplesRouters = [
  {
    path: '/example1',
    name: 'example1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Example1,
    title: 'example1'
  }
]

// studyRouter
const studyRouterRouters = [
  {
    path: '/studyRouterDemo1',
    name: 'studyRouterDemo1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: StudyRouterDemo1,
    title: '路由嵌套',
    children: [
      {
        path: 'sonDemo1',
        name: 'sonDemo1',
        component: srDetail1,
        props: true
      },
      {
        path: 'sonDemo2/:id/:title/:content',  // params 传值，需要占位
        name: 'sonDemo2',
        component: srDetail2,
        props: true // 启用 props，将路由参数作为 props 传递给组件(query的无效，只对params参数生效)
      },{
        name: 'defaultp',
        path: 'user/:id',
        components: { default: srDetail1, sidebar: srDetail2},
        props: { default: true, sidebar: false}
      }
    ]
  },{
    path: '/errorPage',
    name: 'ErrorPage',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: ErrorPage,
    title: '错误页面',
  },{
    path: '/userHome',
    name: 'UserHome',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: UserHome,
    title: '用户主页',
  }
]

// studydemo
const studyDemoRouters = [
  {
    path: '/studdemo1',
    name: 'studdemo1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studdemo1,
    title: '学生管理系统'
  },{
    path: '/studdemo2',
    name: 'studdemo2',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studdemo2,
    title: '学生管理系统2'
  },{
    path: '/studdemo3',
    name: 'studdemo3',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studdemo3,
    title: '学生管理系统3(访问模板引用ref&组件暴漏defineExpose())'
  },{
    path: '/studdemo4',
    name: 'studdemo4',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Studdemo4,
    title: '学生管理系统4（组件+插槽）'
  }
]

// studyDemoUI
const studyDemoUIRouters = [
  {
    path: '/demoUI1',
    name: 'demoUI1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: demoUI1,
    title: '系统管理',
    children: [
      {
        path: 'user',
        name: 'userManage',
        component: userManage,
        title: '用户管理'
      },      {
        path: 'role',
        name: 'roleManage',
        component: roleManage,
        title: '角色管理'
      }
    ]
  }
]
// test
const testRounters = [
  {
    path: '/test',
    name: 'test',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test,
    title: 'test - 购物车测试版'
  },{
    path: '/test1',
    name: 'test1',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test1,
    title: 'test1 - 购物车（组件）'
  },{
    path: '/test2',
    name: 'test2',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Test2,
    title: 'test2 - 购物车（组件+插槽）'
  }
]

// 定义 routersList 将路径分离出来
export const routersList =  [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    title: '首页'
  },
  ...studyDemoUIRouters,
  ...study1Routers,
  ...study2Routers,
  ...study3Routers,
  ...study4Routers,
  ...study5Routers,
  ...studyDemoRouters,
  ...study6Routers,
  ...study7Routers,
  ...study8Routers,
  ...study9Routers,
  ...testRouters,
  ...ExamplesRouters,
  ...testRounters,
  ...studyRouterRouters
]

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),  // history模式
  history: createWebHashHistory(), //hash模式
  routes: routersList
})

export default router
